import React, { useState, useEffect } from 'react'
import { fetchCates, updateCate, delCate } from '@a/cateLists'
import { Table, Image, Switch, Button, Drawer, message, Modal   } from 'antd'
import SearchBar from '@c/SearchBar'
import CateAdd from './components/CateAdd'
import CateUpdate from './components/CateUpdate'
export default function CateLists() {
  const [modal, contextHolder] = Modal.useModal();
  // 表格列配置
  const columns = [
    {
      title: '分类名字',
      dataIndex: 'cateName',
      key: 'cateName'
    },
    {
      title: '分类图标',
      dataIndex: 'icon',
      // 自定义列渲染模板 返回 jsx即可
      render: (icon: string) => {
        return <Image width={60} src={icon}/>
      },
      key: 'icon'
    },
    {
      title: '是否启动',
      dataIndex: 'enable',
      render: (enable: boolean, row: { id: number }) => {
        return <Switch 
          checkedChildren="启动" 
          unCheckedChildren="禁用"
          defaultChecked = {
            enable
          }
          onChange= {
            () => {
              switchCateEnable(row.id, enable)
            }
          }
          />
      },
      key: 'enable'
    },
    {
      title: '操作',
      // 自定义列渲染模板 返回 jsx即可
      render: (i: number, row: { id: any }) => {
        return (
          <>
            <Button onClick={
              () => {
                // 显示修改商品弹窗
                // 修改传递cateId 变量
                openUpdateDrawer();
                setCateId(row.id)
              }
            } type='primary'>编辑</Button>
            <Button danger onClick = {
              () => {
                modal.confirm({
                  title:"删除",
                  content: '此操作会彻底删除分类,确定继续吗?',
                  onOk: () => {
                    removeCate(row.id)
                  }
                })
              }
            }>删除</Button>
          </>
        )
      },
      key: 'icon'
    },
  ]
  // 删除商品
  const removeCate = (id: number) => {
    delCate(id).then(res => {
      if (res.data.code === 200) {
        message.success(res.data.msg, 2, () => {
          // 重新请求列表数据
          getCates()
        })
      }
      
    })
  }
  // 行内修改商品分类的启用禁用状态
  const switchCateEnable = (id: number, enable: boolean) =>{
    updateCate({
      cateId: id,
      enable
    }).then(res => {
      if (res.data.code === 200) {
        message.success(res.data.msg, 2, () => {
          getCates();
        })
      }
    })
  }
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10)
  const [total, setTotal] = useState(0);
  // 切换页码或pageSize
  const changePagination = (page: number, pageSize: number) => {
    setPage(page)
    setPageSize(pageSize)
  }
  useEffect(() => {
    getCates();
  }, [page,pageSize])
  // 商品分类数据获取
  const [cates, setCates] = useState([]);
  const getCates = (searchParams= {key: '', start: '', end: ''}) => {
    fetchCates({
      page,
      pageSize,
      ...searchParams
    }).then(res => {
      if (res.data.code === 200) {
        setCates(res.data.data.lists)
        setTotal(res.data.data.total)
      }
    })
  }
  // 点击搜索
  const onSearch = (searchParams: {key:string, start: string, end: string}) => {
    getCates(searchParams)
  }

  // 新增商品弹窗
  const [openAdd, setOpenAdd] = useState(false)
  const onAddClose = () => {
    setOpenAdd(false)
  }
  const openAddDrawer = () => {
    setOpenAdd(true)
  }
   // 修改商品弹窗
   const [cateId, setCateId] = useState(0)
   const [openUpdate, setOpenUpdate] = useState(false)
   const onUpfateClose = () => {
    setOpenUpdate(false)
   }
   const openUpdateDrawer = () => {
    setOpenUpdate(true)
   }
  return (
    <div>
      {/* 新增商品弹窗 */}
      <Drawer
        title="新增商品"
        closable={true}
        onClose={onAddClose}
        open={openAdd}
        key='addCate'
      >
       <CateAdd/>
      </Drawer>
      {/* /新增商品弹窗 */}
       {/* 修改商品弹窗 */}
       <Drawer
        title="修改商品"
        closable={true}
        onClose={onUpfateClose}
        open={openUpdate}
        key='updateCate'
      >
        <CateUpdate cateId={cateId}/>
      </Drawer>
      {/* /修改商品弹窗 */}
      <SearchBar onSearch={onSearch}/>
      <Button onClick={openAddDrawer} type='primary' style={{margin: 10}}>新增</Button>
      <Table rowKey="id" dataSource={cates} pagination={{
        defaultCurrent: page,
        defaultPageSize: pageSize,
        total: total,
        onChange:changePagination
      }} columns={columns} />
       {contextHolder}
    </div>
  )
}
